<template>
  <view class="order-closure-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="车牌查询列表" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template #right>
            <view class="trend-btn" @click="showTrendPopup">缴费趋势图</view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <!-- 数据统计：月停车费用、已缴费用、待缴费用 -->
          <view class="payment-statistics">
            <view class="stat-card total-fee">
              <view class="card-header">
                <view class="header-icon">
                  <image src="/static/images/wallet-icon.svg" class="icon-image"></image>
                </view>
                <text class="header-title">月停车费用</text>
              </view>
              <view class="card-content">
                <text class="stat-value">¥30,000</text>
                <text class="stat-trend">较上月 <text class="trend-up">↑5.2%</text></text>
              </view>
            </view>

            <view class="stat-card paid-fee">
              <view class="card-header">
                <view class="header-icon">
                  <image src="/static/images/paid-icon.svg" class="icon-image"></image>
                </view>
                <text class="header-title">已缴费用</text>
              </view>
              <view class="card-content">
                <text class="stat-value">¥10,000</text>
                <text class="stat-percent">33.3%</text>
              </view>
              <view class="progress-bar">
                <view class="progress-inner" style="width: 33.3%;"></view>
              </view>
            </view>

            <view class="stat-card unpaid-fee">
              <view class="card-header">
                <view class="header-icon">
                  <image src="/static/images/unpaid-icon.svg" class="icon-image"></image>
                </view>
                <text class="header-title">待缴费用</text>
              </view>
              <view class="card-content">
                <text class="stat-value">¥20,000</text>
                <text class="stat-percent">66.7%</text>
              </view>
              <view class="progress-bar">
                <view class="progress-inner" style="width: 66.7%;"></view>
              </view>
            </view>
          </view>

          <view class="header-bar">
            <view class="header-bar-item" @click="showDateTimePickerModal">
              <text class="title">年月选择</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <up-datetime-picker closeOnClickOverlay :show="showDateTimePicker" mode="year-month"
              @cancel="hideDateTimePickerModal" @confirm="hideDateTimePickerModal"
              @close="hideDateTimePickerModal"></up-datetime-picker>
          </view>

          <up-search :clearabled="true" :showAction="false" placeholder="请输入车牌号"></up-search>
          <!-- <up-tabs :list="tabsList" :scrollable="false" @change="handleTabChange"></up-tabs> -->
        </up-sticky>
      </template>

      <view class="order-closure-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              车牌号：<text class="number">粤J13545</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <!-- 列表展示（车牌号、支付金额、缴费类型（临停缴费、充值、月卡续费）、支付时间、优免金额） -->
              <view class="item">
                <text class="label">
                  状态
                </text>
                <view class="value">
                  <view class="item-tag">
                    <up-tag text="欠费" type="warning"></up-tag>
                  </view>
                </view>
              </view>
              <view class="item">
                <text class="label">
                  支付金额：
                </text>
                <text class="value">
                  20000
                </text>
              </view>
              <view class="item">
                <text class="label">
                  缴费类型：
                </text>
                <text class="value">
                  临停缴费
                </text>
              </view>
              <view class="item">
                <text class="label">
                  支付时间：
                </text>
                <text class="value">
                  2025-9-1 11:02:35
                </text>
              </view>
              <view class="item">
                <text class="label">
                  优免金额：
                </text>
                <text class="value">
                  0
                </text>
              </view>
            </view>
            <!-- <view class="card-footer">
              <view class="operate">
                <up-button type="primary" text="查看详情" plain class="custom-style"
                  @click="handleDetail(item)"></up-button>
                <up-button type="primary" text="核验车牌" class="custom-style" @click="handleCheck(item)"></up-button>
              </view>
            </view> -->
          </view>
        </view>
      </view>
    </z-paging>
    
    <!-- 缴费趋势图弹窗 -->
    <PaymentTrendPopup :show="showTrendModal" @close="hideTrendPopup" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getRealNameVerifyList } from '@/api';
import PaymentTrendPopup from '../components/PaymentTrendPopup.vue';

const { bool: show, setTrue: openModal } = useBoolean();
const { bool: showDateTimePicker, setTrue: showDateTimePickerModal, setFalse: hideDateTimePickerModal } = useBoolean();
const { bool: showTrendModal, setTrue: showTrendPopup, setFalse: hideTrendPopup } = useBoolean();
const type = ref('add')
const editingData = ref({})

// 选项卡数据  
const tabsList = [
  { name: '全部' },
  { name: '待核验' },
  { name: '已核验' },
  { name: '我的核验' },
];
const currentTab = ref(0);

// z-paging 组件引用
const paging = ref(null)

// 当前显示的列表数据
const currentList = ref([])

// 选项卡切换事件
const handleTabChange = (e) => {
  const newIndex = e.index;
  if (currentTab.value === newIndex) {
    return; // 如果是同一个tab，不需要重新加载
  }

  currentTab.value = newIndex;

  // 切换tab时重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
}

const handleDetail = (item) => {
}

const handleCheck = (item) => {
}

// 获取车辆列表数据
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize, currentTab.value)

  const params = {
    pageNum: pageNo,
    pageSize
  }

  await fetchList(params)
};

const fetchList = async (params) => {
  try {
    const result: any = await getRealNameVerifyList({ ...params, status: currentTab.value === 0 ? undefined : currentTab.value })
    const data = result.data
    paging.value.complete(data.records || [])
  } catch (error) {
    paging.value.complete(false)
  }
}


// 搜索按钮点击事件
const handleSearch = () => {
};

// 查看详情
const handleView = (row: any) => {
  // 跳转到详情页逻辑
  console.log('查看详情:', row);
};

// 审核操作
const handleVerify = (row: any) => {
  // 跳转到审核页逻辑
  console.log('审核操作:', row);
};

// 页面挂载时获取数据
onMounted(() => {
  fetchList({
    pageNum: 1,
    pageSize: 10,
  })
});
</script>

<style scoped lang="scss">
.order-closure-list {
  padding: 20px;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .select-all1 {
    display: flex;
    align-items: center;

    .selected-count {
      font-size: 24rpx;
      color: #999;
      margin-left: 30rpx;

      .red {
        color: #ff5c5c;
        font-weight: 500;
      }
    }
  }

  .confirm-btn {
    width: 260rpx;
    height: 72rpx;
    background: linear-gradient(180deg, #ff9900 0%, #fe6000 100%);
    border-radius: 172rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
  }
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx 0rpx;

  .time-picker {
    width: 480rpx;
    display: flex;
    align-items: center;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }
  }

  &-item {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    margin-bottom: 20rpx;

    .location-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .waiting-count {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #fe6000;
      margin-left: 10rpx;
    }
  }
}

/* 支付统计样式 */
.payment-statistics {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 10rpx 0 30rpx;
}

.stat-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx;
  overflow: hidden;
  position: relative;

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .header-icon {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;

      .icon-image {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .header-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
  }

  .card-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12rpx;
  }

  .stat-value {
    font-size: 40rpx;
    font-weight: bold;
    color: #333333;
    line-height: 1.2;
  }

  .stat-trend,
  .stat-percent {
    font-size: 24rpx;
    color: #666666;
  }

  .trend-up {
    color: #FF5252;
  }

  .trend-down {
    color: #00C48C;
  }

  .progress-bar {
    height: 8rpx;
    background-color: #F0F0F0;
    border-radius: 4rpx;
    overflow: hidden;

    .progress-inner {
      height: 100%;
      border-radius: 4rpx;
    }
  }
}

/* 月停车费用卡片特殊样式 */
.total-fee {
  border-left: 8rpx solid #4080FF;

  .header-icon {
    background-color: rgba(64, 128, 255, 0.1);
  }
}

/* 已缴费用卡片特殊样式 */
.paid-fee {
  border-left: 8rpx solid #00C48C;

  .header-icon {
    background-color: rgba(0, 196, 140, 0.1);
  }

  .progress-inner {
    background-color: #00C48C;
  }
}

/* 待缴费用卡片特殊样式 */
.unpaid-fee {
  border-left: 8rpx solid #FF7D00;

  .header-icon {
    background-color: rgba(255, 125, 0, 0.1);
  }

  .progress-inner {
    background-color: #FF7D00;
  }
}

/* 趋势图按钮样式 */
.trend-btn {
  padding: 12rpx 20rpx;
  background-color: #4080FF;
  color: #ffffff;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    background-color: #3366CC;
    transform: scale(0.95);
  }
}
</style>